<template>
    <div style="width: 100%;height:100%;padding:5px;">
        <rx-fit >
            <div slot="toolheader" align="right" foldbtn="false">
                <a-row style="padding: 10px 0">
                    <a-button-group>
                        <a-button @click="showCheckHistory" size="small">{{i18n('list.appHistory','审批历史')}}</a-button>
                        <a-button @click="showBpmInstLog" size="small">{{i18n('list.activeLog','活动日志')}}</a-button>
                        <a-button icon="profile" @click="showMsg" size="small">{{i18n('list.leaveMsg','留言')}}</a-button>
                        <a-button @click="formPrint()" size="small">{{$ti18('rxForm.print','打印')}}</a-button>
                    </a-button-group>
                    <a-button-group>
                        <a-button type="primary" size="small" @click="modifyProcess">{{i18n('list.modifyDefine','修改流程定义与配置')}}</a-button>
                    </a-button-group>
                </a-row>
            </div>
            <a-tabs default-active-key="1" >
                <a-tab-pane key="1" :tab="i18n('list.document','单据')">
                    <div class="btnContainer" style="padding-top:6px;">
                        <a-button icon="save" @click="saveData"  type="primary" size="small">{{i18n('list.saveData','保存数据')}}</a-button>
                    </div>
                    <rx-fit class="BpmAtabpane">
                        <rx-forms ref="rxForms" v-if="processConfig.formType=='online'"></rx-forms>
                        <component ref="customForm" :is="formComponent" :pk="customFormPk" v-else></component>
                    </rx-fit>
                </a-tab-pane>
                <a-tab-pane key="2" :tab="i18n('list.nodeStaff','节点人员配置')" force-render>
                    <bpm-inst-users :act-inst-id="actInstId" :def-id="defId" @subCloseWindow="subCloseWindow"></bpm-inst-users>
                </a-tab-pane>
                <a-tab-pane key="3" :tab="i18n('list.processVar','流程变量')" force-render>
                    <bpm-inst-vars :act-inst-id="actInstId"></bpm-inst-vars>
                </a-tab-pane>
                <a-tab-pane key="4" :tab="i18n('list.flowChart','流程图')" force-render>
                    <BpmImageView :instId="instId"/>
                </a-tab-pane>
            </a-tabs>
        </rx-fit>
        <!-- 流程实例日志 -->
        <bpm-inst-logs :instId="instId" :log-show.sync="logShow" />
        <!--流程实例消息-->
        <bpm-inst-msgs :instId="instId" :msg-show.sync="msgShow"/>
        <!--审批历史-->
        <bpm-check-history  :inst-id="instId"  :historyShow.sync="historyShow" />
    </div>
</template>

<script>
    import {BaseForm,RxDialog,Util,RxFit, Dialog} from '@lowcode/jpaas-common-lib';
    import BpmInstMsgs from "./BpmInstMsgs"
    import BpmInstLogs from "./BpmInstLogs";
    import BpmInstApi from '@/api/bpm/core/bpmInst'
    import FormPcApi from '@/api/form/core/formPc'
    import BpmImageView from "../comps/BpmImageView";
    import RxForms from "./RxForms";
    import BpmCheckHistory from "./BpmCheckHistory";
    import formbase from '@/api/formbase';
    import BpmDefApi from "@/api/bpm/core/bpmDef";
    import BpmNodeJump from './BpmNodeJump.vue';
    import BpmInstVars from './component/BpmInstVars.vue';
    import BpmInstUsers from './component/BpmInstUsers';
    import userState from "@/assets/js/userState";


    export default {
        name: "BpmInstOperator",
        components:{
            RxDialog,
            RxFit,
            RxForms,
            BpmInstMsgs,
            BpmInstLogs,
            BpmImageView,
            BpmCheckHistory,
            Dialog,
            BpmInstVars,
            BpmInstUsers
        },
        mixins:[formbase,userState],
        props:{
            instId:{
                type:String,
                required:true
            },
            backNodeId:{//在流程明细中进行回退时指定的目标节点
                type:String,
                required:false
            },
            layerid: String,
            lydata: Object,
            destroy:Function,
        },
        data(){
            return {
                historyShow:false,
                logShow:false,
                msgShow:false,
                bpmInstDetail:{},
                backBtnLoading:false,//撤回按钮加载状态
                actInstId:"",
                defId:"",
                vmSelf:this,
                processConfig: {
                    formType: "online"
                },
                formComponent: "",
                customFormPk: "",
            }
        },
        created() {
            this.loadDetail();
            //this.initProcessConfig();
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"bpmInst",key);
            },
            subCloseWindow(action){
                Util.closeWindow(this,action);
            },
            showCheckHistory(){
                this.historyShow=true;
            },
            showBpmInstLog(){
                this.logShow=true;
            },
            showMsg(){
                this.msgShow=true;
            },
            //修改流程定义配置
            modifyProcess(){
                let url=BpmDefApi.designBaseUrl+'?defId=' + this.bpmInstDetail.bpmInst.defId;
                window.open(url);
            },
            loadDetail() {
                let self_ = this;
                if(!self_.instId){
                    self_.instId=self_.$route.params.instId;
                }
                BpmInstApi.getInstDetailForInterpose(self_.instId).then(res => {
                    self_.bpmInstDetail=res;
                    self_.actInstId=self_.bpmInstDetail.bpmInst.actInstId;
                    self_.defId=self_.bpmInstDetail.bpmInst.defId;
                    self_.initProcessConfig();
                })
            },
            initProcessConfig() {
                var self_ = this;
                BpmInstApi.getProcessConfig(this.defId, "").then(res => {
                    if (!res.success) {
                        self_.$message.warning(res.message);
                        return;
                    }

                    if (res.data) {
                        var config = Util.deepClone(self_.processConfig);
                        self_.processConfig = Object.assign(config, res.data);
                    }

                    //处理表单配置。
                    self_.handFormConfig(res.data);

                    //加载表单。
                    if (self_.processConfig.formType == "online") {
                        var curUser=self_.user;
                        let contextData={
                            instId:self.instId,
                            tenantId: curUser.tenantId,
                            tenantLabel:curUser.tenantLabel,
                            opinionHistorys:self_.bpmInstDetail.bpmCheckHistories
                        };
                        self_.$refs.rxForms.setData(self_.bpmInstDetail.formData.data,false,contextData);
                    }else {
                        self_.initCustomForm();
                    }
                })
            },
            initCustomForm() {
                this.instId = this.instId ? this.instId : this.$route.params.instId;
                if (!this.instId) {
                    if(this.config && this.config.instId){
                        this.instId=this.config.instId;
                    }else {
                        return;
                    }
                }
                BpmInstApi.getPkByInstId(this.instId).then(res => {
                    if (!res.success) {
                        return;
                    }
                    this.pk = res.data;
                })
            },
            //处理表单配置。
            handFormConfig(conf){
                //startForm
                if( conf.startForm.formpc && conf.startForm.formpc.length>0){
                    var form= conf.startForm.formpc[0];
                    if(form && form.type=="custom"){
                        this.processConfig.formType="custom";
                        this.formComponent=this.loadView(form.component) ;
                        return;
                    }
                }
                //获取全局。
                if( conf.globalForm.formpc && conf.globalForm.formpc.length>0){
                    var form= conf.globalForm.formpc[0];
                    if(form && form.type=="custom"){
                        this.processConfig.formType="custom";
                        this.formComponent=this.loadView(form.component);
                        return;
                    }
                }
            },
            loadView(view)  { // 路由懒加载
                return require(`@/views/${view}`).default;
            },
            saveData(){
                var self_=this;
                this.$confirm({
                    title: this.$ti18('rxMsa.tipsInfo','提示信息'),
                    content: this.i18n('sureToSave','确认保存表单数据吗?'),
                    okText: this.$ti18('rxForm.ackBtn','确认'),
                    cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                    zIndex:20000,
                    onOk() {
                        if (self_.processConfig.formType == "online") {
                            var json=self_.$refs.rxForms.getData();
                            FormPcApi.saveFormDataDirect(json);
                        }else {
                            self_.$refs.customForm.saveData();
                        }
                    }
                });
            },
            formPrint(){
                let bpmInst=this.bpmInstDetail.bpmInst;
                var baseUrl = process.env.VUE_APP_ADMIN_FRONT;
                var defId = bpmInst.defId;
                var instId = bpmInst.instId;
                var url = baseUrl ;

                url+="/flowprint/" + defId;
                if (instId) {
                    url += "/" + instId;
                } else {
                    url += "/-1";
                }
                window.open(url);

            }
        }
    }
</script>

<style scoped>
    .BpmAtabpane{
        height: calc(100% - 35px) !important;
    }
    .btnContainer{
        padding: 2px 10px 2px 0px ;
        width: 100%;
        text-align: right;

    }
</style>